<%@ page pageEncoding="UTF-8" isELIgnored="false" trimDirectiveWhitespaces="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>SKU</title>
    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="${ctx}/js/widget/sku.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/base.css">
    <link rel="stylesheet" type="text/css" href="/css/shop.css">
    <link rel="stylesheet" type="text/css" href="/css/intro.css">
<style type="text/css">
    .tb-text {
        color: #666;
        font-size: 12px;
        margin: 0;
        padding: 3px 2px 0 3px;
        height: 26px;
        border: 1px solid #a7a6ac;
        width: 36px;
        line-height: 26px;
        background-position: -406px -41px;
    }

    /*#detail .tb-property*/
    .tb-amount-widget .mui-amount-input {
        vertical-align: middle;
    }

    .tb-amount-widget .mui-amount-btn {
        display: inline-block;
        vertical-align: middle;
    }

    .tb-amount-widget .mui-amount-increase {
        width: 16px;
        height: 12px;
        overflow: hidden;
        cursor: pointer;
        border: 1px solid #a7a6ab;
        display: block;
        font-family: tm-detail-font;
        line-height: 12px;
        font-size: 16px;
        margin-bottom: 3px;
    }

    .tb-amount-widget .mui-amount-decrease {
        width: 16px;
        height: 12px;
        overflow: hidden;
        cursor: pointer;
        border: 1px solid #a7a6ab;
        display: block;
        font-family: tm-detail-font;
        line-height: 12px;
        font-size: 16px;
    }

    .tb-amount-widget .mui-amount-unit {
        vertical-align: middle;
        margin-left: 5px;
    }

    /*#content*/
    .tb-amount em {
        color: #878787;
        margin-left: 1.2em;
    }

    .tb-action {
        clear: both;
        padding: 10px 0 0 66px;
        margin: 10px 0 0;
    }

    .tb-btn-sku {
        margin-right: 10px;
        float: left;
    }

    /*#detail*/
    .tb-btn-sku a {
        margin-right: 0;
        float: left;
        overflow: hidden;
        position: relative;
        width: 178px;
        height: 38px;
        line-height: 38px;
        background-color: #ffeded;
        border: 1px solid #c40000;
        color: #c40000;
        font-family: 'Microsoft Yahei';
        font-size: 16px;
        text-align: center;
    }

    /*#detail*/
    .tb-btn-sku .ensure-text {
        display: none;
    }

    /*#detail*/
    .tb-btn-basket {
        margin-right: 1px;
    }

    /*#detail*/
    .tb-btn-basket a {
        background-color: #c40000;
        border: 1px solid #c40000;
        color: #fff;
    }

    /*#detail*/
    .tb-btn-add a {
        background-color: #c40000;
        border: 1px solid #c40000;
        color: #fff;
    }

    .tb-hidden {
        display: none;
    }

    /*#detail*/
    .tb-btn-sku a.noPost {
        cursor: default;
    }

    /*#detail*/
    .tb-btn-buy .noPost {
        background-color: #f9f9f9;
        color: #818181;
        border: 1px solid #818181;
    }

    /*#detail*/
    .tb-btn-basket .noPost {
        background-color: #818181;
        color: #fff;
        border: 1px solid #818181;
    }
    .ks-imagezoom-icon {
        /*
        display: block;
        position: absolute;
        right: -1px;
        bottom: -1px;
        height: 23px;
        width: 23px;
        border-right: 1px solid rgb(153, 153, 153);
        border-bottom: 1px solid rgb(153, 153, 153);
        */
        background: url(/img/zoom-icon.png) 0% 0% no-repeat scroll transparent;


        font-family: tm-detail-font;
        font-style: normal;
        font-weight: 400;
        height: 30px;
        line-height: 30px;
        width: 30px;
        z-index: 2;
        position: absolute;
        background-color: #fff;
        opacity: .6;
        color: #333;
        font-size: 18px;
        right: 0;
        bottom: 0;
    }
</style>
<style type="text/css">
    .tm-promo-panel dd {
        padding: 4px 0;
    }

    .tm-promo-panel .prop-tit {
        line-height: 36px;
    }

    .tm-promo-panel .tm-promo-price {
        line-height: 24px;
        font-size: 12px;
    }

    .tm-promo-panel .tm-promo-price .currency {
        vertical-align: middle;
        color: #333;
        font-size: 14px;
    }

    .tm-promo-panel.tm-promo-cur .tm-promo-price .currency {
        vertical-align: middle;
        color: #f43499;
        font-size: 18px;
        font-family: Arial;
        -webkit-font-smoothing: antialiased;
    }

    .tm-promo-panel.tm-promo-cur .tm-promo-price .tm-price {
        vertical-align: middle;
        font-size: 30px;
        color: #f43499;
        font-weight: bolder;
        font-family: Arial;
        -webkit-font-smoothing: antialiased;
    }

    .tm-promo-panel .tm-promo-price .tm-promo-type {
        background-color: #f47a86;
        border-radius: 1px;
        color: #fff;
        height: 16px;
        line-height: 16px;
        margin: 0 2px 4px 6px;
        padding: 1px 5px;
        position: relative;
    }

    .tm-promo-panel .tm-promo-price .tm-promo-type s {
        position: absolute;
        width: 0;
        display: block;
        font-size: 0;
        left: -4px;
        bottom: 0;
        height: 0;
        border: 3px solid #f47a86;
        border-color: transparent #f47a86 #f47a86 transparent;
    }

    .tm-price-panel .tm-price {
        text-decoration: line-through;
        font-size: 14px;
    }

    .meta-price .tm-tagPrice-panel {
        color: #333;
    }

    .meta-price .tm-tagPrice-panel .currency {
        text-decoration: line-through;
        font-size: 14px;
    }

    .meta-price .tm-tagPrice-panel .tm-price {
        text-decoration: line-through;
        font-size: 14px;
    }

    .gallery .galler-inner a .ks-imagezoom-wrap {
        margin: -1px 0 0 -1px;
    }

    .ks-imagezoom-lens {
        background-image: url(/img/mark-2-2.png);
    }
    .ks-imagezoom-lens {
        background-color: transparent;
        background-attachment: scroll;
        background-repeat: repeat;
        cursor: move;
        z-index: 1;
        position: absolute;
        overflow: hidden;
        background-position: 0 0;
    }
    .ks-overlay {
        position: absolute;
        left: -9999px;
        top: -9999px;
    }
    .ks-imagezoom-viewer {
        border: 1px solid #CCC;
        overflow: hidden;
        text-align: center;
        z-index: 1999;
        background-color: #fff;
    }
    .ks-imagezoom-viewer img {
        position: absolute;
        left: 0;
        top: 0;
    }


    .tabbar-box {
        width: 788px;
        border: 1px solid #dfdfdf;
        z-index: 9999;
    }
    .tabbar {
        width: 100%;
        background-color: #fff;
        height: 48px;
    }
    .tabbar li {
        float: left;
        margin-left: -1px;
        height: 48px;
        line-height: 48px;
        display: block;
        cursor: pointer;
    }
    .tabbar a {
        text-decoration: none;
        border-right: 1px dotted #d2d2d2;
        color: #333;
        padding: 0 20px;
    }
    .tabbar .selected {
        position: relative;
        border-top: 2px solid #b00000;
        height: 47px;
        margin: -1px 0 0 0px;
        z-index: 1;
        padding: 0;
    }
    .tabbar .selected a {
        font-weight: 700;
        display: block;
        height: 100%;
        line-height: 46px;
        color: #b10000;
        border-left: 1px solid #cfbfb1;
        border-right: 1px solid #cfbfb1;
    }
    .tabbar .selected:after{
        content: ' ';
        display: block;
        width: 0;
        height: 0;
        border-width: 5px;
        border-style: solid;
        border-color: #b00000 transparent transparent;
        font-family: arial;
        position: absolute;
        top: -1px;
        left: 50%;
        margin-left: -5px;
    }
    #attributes div.attributes-list {
        clear: both;
        margin-bottom: 10px;
        border: 1px solid #e6e6e6;
        border-top: 0;
    }
    #attributes ul {
        zoom: 1;
    }
    #attributes .attributes-list ul {
        padding: 0 20px 18px;
        text-indent: 0;
        border-top: 1px solid #fff;
    }
    #attributes ul:after {
        display: block;
        visibility: hidden;
        clear: both;
        height: 0;
        content: "\0020";
    }
    #attributes .attributes-list li {
        display: inline;
        float: left;
        width: 220px;
        height: 18px;
        overflow: hidden;
        margin: 10px 15px 0 0;
        line-height: 18px;
        vertical-align: top;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #666;
    }
</style>
</head>
<body class="small">
<%@ include file="/include/site-nav.jspf"%>
<!-- 商品信息 -->
<div class="w1190">
    <%@ include file="/include/hd.jspf"%>
</div>
<%@ include file="/include/main-nav.jspf" %>
<div class="w1190 not-index small">
    <%@include file="/include/cat-nav.jspf"%>
</div>
<div id="intro" class="w1190 clr">
    <div class="path">您当前的位置： <a href="###">所有结果</a> &gt; <a href="###">奔腾</a></div>
    <div class="meta">
        <div class="meta-inner">
            <!-- 标题 -->
            <div class="meta-hd">
                <h1>Macnito 挂钩</h1>

                <p>【支持货到付款】 每件三支装</p>
            </div>
            <!-- 价格信息 -->
            <div class="meta-price">
                <dl class="tm-promo-panel tm-promo-cur clr" id="J_PromoPrice" data-label="促销">
                    <dt class="prop-tit">促销价</dt>
                    <dd>
                        <div class="tm-promo-price">
                            <em class="currency">¥</em>
                            <span id="price" class="tm-price">2198.00</span>
                            <em class="tm-promo-type "><s></s>国行正品</em> &nbsp;&nbsp;
                        </div>
                        <p></p>
                    </dd>
                </dl>
                <dl class="tm-price-panel clr" id="J_StrPriceModBox">
                    <dt class="prop-tit">价格</dt>
                    <dd>
                        <!--
                        <em class="tm-yen">¥</em>
                        <span class="tm-price">2499.00</span>
                        -->
                    </dd>
                </dl>
                <dl class="tm-tagPrice-panel clr">
                    <dt class="prop-tit">专柜价</dt>
                    <dd>
                        <!--
                        <em class="tm-yen">¥</em>
                        <span class="tm-price">2499.00</span>
                        -->
                    </dd>
                </dl>
            </div>
            <!-- 属性 -->
            <div class="meta-sku">
                <dl class="prop sale-prop clr">
                    <dt class="prop-tit">版本类型</dt>
                    <dd>
                        <ul data-property="版本类型" class="clr">
                            <li data-value="10">
                                <a href="#"><span>中国大陆</span></a>
                                <!--<i>已选中</i>-->
                            </li>
                        </ul>
                    </dd>
                </dl>
                <dl class="prop sale-prop img-prop clr">
                    <dt class="prop-tit">机身颜色</dt>
                    <dd>
                        <ul data-property="机身颜色" class="clr">
                            <li data-value="20" title="全白">
                                <a href="#"
                                   style="background:url(http://gi3.md.alicdn.com/bao/uploaded/i3/TB1UbBEGXXXXXagXpXXoLjd_VXX_064707.jpg_40x40q90.jpg) center no-repeat;">
                                    <span>全白</span>
                                </a>
                            </li>
                            <li data-value="24" title="银翼">
                                <a href="#"
                                   style="background:url(http://gi3.md.alicdn.com/bao/uploaded/i7/TB1HViKGFXXXXbuXFXXfJnIFFXX_124513.jpg_40x40q90.jpg) center no-repeat;">
                                    <span>银翼</span>
                                </a>
                                <i>已选中</i>
                            </li>
                        </ul>
                    </dd>
                </dl>
                <dl class="prop sale-prop clr ">
                    <dt class="prop-tit">套餐类型</dt>
                    <dd>
                        <ul data-property="套餐类型" class="clr">
                            <li data-value="31">
                                <a href="#">
                                    <span>官方标配</span>
                                </a>
                                <!--<i>已选中</i>-->
                            </li>
                            <li data-value="32">
                                <a href="#"><span>套餐一</span></a>
                                <!--<i>已选中</i>-->
                            </li>
                            <li data-value="33">
                                <a href="#"><span>套餐二</span></a>
                                <!--<i>已选中</i>-->
                            </li>
                            <li data-value="34">
                                <a href="#"><span>套餐三</span></a>
                                <!--<i>已选中</i>-->
                            </li>
                            <li data-value="35"><a href="#"><span>套餐四</span></a></li>
                            <li data-value="36"><a href="#"><span>套餐五</span></a></li>
                        </ul>
                    </dd>
                </dl>
                <dl class="prop sale-prop clr ">
                    <dt class="prop-tit">机身内存</dt>
                    <dd>
                        <ul data-property="机身内存" class="clr J_TSaleProp  ">
                            <li data-value="40">
                                <a href="#">
                                    <span>16GB</span>
                                </a>
                                <!--<i>已选中</i>-->
                            </li>
                            <li data-value="41" class=""><a href="#"><span>32GB</span></a></li>
                        </ul>
                    </dd>
                </dl>
                <!-- 数量 -->
                <dl class="tb-amount clr">
                    <dt class="prop-tit">数量</dt>
                    <dd id="J_Amount">
                       <span class="tb-amount-widget mui-amount-wrap">
                           <input type="text" class="tb-text mui-amount-input" value="1" maxlength="8" title="请输入购买量">
                           <span class="mui-amount-btn">
                               <span class="mui-amount-increase">+</span>
                               <span class="mui-amount-decrease">-</span>
                           </span>
                           <span class="mui-amount-unit">件</span>
                       </span>
                        <em id="J_EmStock" class="tb-hidden" style="display: inline;">库存99件</em>
                        <span id="J_StockTips"></span>
                    </dd>
                </dl>
                <!-- 操作 -->
                <div class="tb-action clr">
                    <div class="tb-btn-buy tb-btn-sku">
                        <a id="J_LinkBuy" href="#" rel="nofollow" data-addfastbuy="true" title="点击此按钮，到下一步确认购买信息。"
                           class="noPost">立刻购买
                            <span class="ensure-text">确认</span>
                        </a>
                    </div>
                    <div class="tb-btn-basket tb-btn-sku ">
                        <a href="#" rel="nofollow" id="J_LinkBasket" class="noPost"><i></i>加入购物车
                            <span class="ensure-text">确认</span>
                        </a>
                    </div>
                    <div class="tb-btn-add tb-btn-sku tb-hidden">
                        <a href="#" rel="nofollow" id="J_LinkAdd"><i></i>加入购物车</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="gallery">
        <div class="gallery-inner">
            <a href="#" rel="nofollow" target="_blank">
                <%--<span class="ks-imagezoom-icon"></span>--%>
                <img alt="【Macnito】挂钩" src="/img/product-img.jpg" data-haszoom="700">
                <!-- zoom -->
                <!--d
                <span class="ks-imagezoom-wrap">
                    <%--<img alt="【Macnito】挂钩" src="/img/product-img.jpg" data-haszoom="700">--%>
                    <img alt="【Macnito】挂钩" src="http://gi3.md.alicdn.com/bao/uploaded/i7/TB1wGksGpXXXXXQXpXX1K9S8pXX_023438.jpg_430x430q90.jpg" data-haszoom="700">
                    <span class="ks-imagezoom-lens" style="position: absolute;top:200px;left:200px;width:218px;height:218px;"></span>
                </span>
                -->
            </a>
        </div>
    </div>
</div>
<div class="bd w1190">
    <%@include file="/cat2.jsp"%>
    <div class="main-wrap" style="width: 790px;margin-left:200px;">
        <div class="tabbar-box">
            <ul class="tabbar">
                <li class="selected"><a href="">商品详情</a></li>
                <li><a href="">参数</a></li>
                <li></li>
            </ul>
        </div>
        <div id="attributes" class="attributes">
            <div class="attributes-list" id="J_AttrList">
                <div class="tm-clear cf tb-hidden tm_brandAttr" id="J_BrandAttr" style="display: block;"><div class="name">品牌名称：<a class="J_EbrandLogo" target="_blank" href="http://brand.tmall.com/brandInfo.htm?brandId=25143&amp;type=0&amp;scm=1048.1.1.4">Meizu/魅族</a></div><a class="tm-collectBtn j_DetailBrand" data-brandid="25143" href="#" hidefocus="true"><i></i><span>关注</span></a></div>
                <p class="attr-list-hd tm-clear"><a class="ui-more-nbg tm-MRswitchAttrs" href="#J_Attrs">更多参数<i class="ui-more-nbg-arrow tm-MRswitchAttrs"></i></a><em>产品参数：</em></p>
                <ul id="J_AttrUL cf">
                    <li title="Meizu/魅族 MX4(FLYME POWERED BY YUNOS)">产品名称：Meizu/魅族 MX4(FLYME P...</li>			    				    				    						    						    							    						    							    						    							    						    							    						    							    						    							    					    					    										    	 				    					    																																																																					<li title="&nbsp;MX4(FLYME POWERED BY YUNOS)">魅族型号:&nbsp;MX4(FLYME POWERED BY YUNOS)</li>
                    <li title="&nbsp;灰色&nbsp;金色">机身颜色:&nbsp;灰色&nbsp;金色</li>
                    <li title="&nbsp;2GB">运行内存RAM:&nbsp;2GB</li>
                    <li title="&nbsp;16GB&nbsp;32GB">机身内存:&nbsp;16GB&nbsp;32GB</li>
                    <li title="&nbsp;单卡多模">网络模式:&nbsp;单卡多模</li>
                    <li title="&nbsp;3100mAh">电池容量:&nbsp;3100mAh</li>
                    <!-- 健字号相关-->
                </ul>
            </div>
        </div>
        <%@ include file="/detail.jspf" %>
    </div>
</div>
<%@ include file="/include/ft.jspf" %>
<script type="text/javascript" src="/js/widget/sku-test.js"></script>
<script type="text/javascript" src="/js/iz.js"></script>
</body>
</html>
